<template>
	<view class="yazLogin">
		<view class="input_wrap">
			<image class="icon" mode="aspectFit" src="../../../static/image/public/admin.png"></image>
			<input class="input_insert" type="text" placeholder="请输入手机号码" v-model="login.username"
				@input="clearInput" />
			<text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
		</view>
		<view class="input_wrap">
			<image class="icon" mode="aspectFit" src="../../../static/image/public/yzm.png"></image>
			<input class="input_insert" type="text" placeholder="请输入验证码" v-model="login.code" />
			<button class="scode" size="mini" :disabled="btnDis" plain="true" @tap="sendCode">{{btnText}}</button>
		</view>
	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker.js'
	import formRuleConfig from '@/config/formRule.config.js'

	export default {
		data() {
			return {
				btnDis: false,
				btnText: "获取验证码",
				showClearIcon: false,
				login: {
					username: null,
					code: null
				}
			}
		},
		methods: {
			clearInput(e) {
				if (e.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon() {
				this.login.username = "";
				this.showClearIcon = false;
			},

			//发送验证码
			async sendCode() {
				let checkRes = graceChecker.check(this.login, formRuleConfig.sendCodeRule);
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
					return;
				}
				await this.$api.getMsgCode(this.login.username);

				uni.showToast({
					title: '发送成功'
				});
				// 开启倒计时
				this.countDown();
			},
			// 验证码倒计时
			countDown() {
				let t = null;
				let timer = 60;
				this.btnDis = true;
				clearInterval(t);
				this.btnText = `${timer}s`;
				t = setInterval(() => {
					if (timer == 0) {
						clearInterval(t);
						this.btnText = "重新发送";
						this.btnDis = false;
						return;
					}
					timer--;
					this.btnText = `${timer}s`;
				}, 1000)
			}
		},
	}
</script>

<style scoped lang="scss">
	.input_wrap {
		display: flex;
		background: #F8F8F8;
		border-radius: 44px;
		height: 88rpx;
		align-items: center;
		margin-bottom: 30rpx;
		overflow: hidden;

		input {
			flex: 1;
			height: 88rpx;
			line-height: 88rpx;
		}
	}

	.icon {
		width: 28rpx;
		height: 36rpx;
		margin: 0 36rpx;
	}

	.input_insert {
		font-size: 28rpx;
	}

	.uni-icon {
		font-family: uniicons;
		font-size: 40rpx;
		font-weight: normal;
		font-style: normal;
		width: 28rpx;
		height: 28rpx;
		line-height: 28rpx;
		color: #dcdcdc;
		margin: 0 28rpx
	}

	.scode {
		border: none;
		color: #585cf7;
	}
</style>
